<template>
  <div class="com-container">
      <div class="com-chart" ref="stock_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            chartInstance: null,
            allData: null,
            currentIndex: 0,
            timerId: null
        }
    },
    created() {
        // 组件创建完成后，进行回调函数的注册
        this.$socket.registerCallBack("stockData", this.getData);
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
            action: 'getData',
            socketType: 'stockData',
            chartName: 'stock',
            value: ''
        })
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        window.removeEventListener('resize', this.screenAdapter);
        clearInterval(this.timerId);
        this.$socket.unRegisterCallBack('stockData');
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.stock_ref, this.theme);
            const initOption = {
                title: {
                    text: '▎库存销售量',
                    top: 20,
                    left: 20
                }
            };
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId);
            });
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            });
        },
        getData (ret) {
            // const { data : ret} = await this.$http.get('stock');
            this.allData = ret;
            this.updateChart();
            this.startInterval()
        },
        updateChart () {
            const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%']
            ];
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF']
            ];
            const showData = this.allData.slice(this.currentIndex, this.currentIndex + 5);
            const seriesArr = showData.map((item, index) => {
                return {
                    type: 'pie',
                    center: centerArr[index],
                    hoverAnimation: false,
                    labelLine: {
                        show: false
                    },
                    label: {
                        position: 'center',
                        color: colorArr[index][0]
                    },
                    data: [
                        {
                            name: item.name + '\n\n' + item.sales,
                            value: item.sales,
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: colorArr[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[index][1]
                                    }
                                ])
                            }
                        },
                        {
                            value: item.stock,
                            itemStyle: {
                                color: '#333843'
                            }
                        }
                    ]
                }
            })
            const dataOption = {
                series: seriesArr
            };
            this.chartInstance.setOption(dataOption);
        },
        screenAdapter () {
            const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 3.6;
            const innerRadius = titleFontSize * 2.2;
            const outerRadius = titleFontSize * 2.8;
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: [outerRadius, innerRadius],
                        label: {
                            fontSize: titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outerRadius, innerRadius],
                        label: {
                            fontSize: titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outerRadius, innerRadius],
                        label: {
                            fontSize: titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outerRadius, innerRadius],
                        label: {
                            fontSize: titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outerRadius, innerRadius],
                        label: {
                            fontSize: titleFontSize / 2
                        }
                    }
                ]
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize()
        },
        startInterval () {
            if (this.timerId) {
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(() => {
                this.currentIndex = this.currentIndex > 0 ? 0 : 5;
                this.updateChart();
            }, 5000)
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme () {
            this.chartInstance.dispose(); // 销毁当前图表
            this.initChart();
            this.screenAdapter();
            this.updateChart();
        }
    }
}
</script>

<style>

</style>